<template>
  <view class="xuniList" :style="bgStyle">
    <image class="bgImg" :src="dataPeizhi.bgImg" mode="scaleToFill" />
    <view class="xuniHeader">
      <view class="header flex flex-bt">
        <view class="left">
          <view class="name">我的{{ goodTypeData?.name }}</view>
          <view class="number">{{couponInfo.balance}}</view>
        </view>
        <view class="right flex flex-align">
          <view class="rightBtn flex flex-align flex-center" @click="menuJump({is_tab: false,link: '/pages/shop/walletDetail?id='+parme.currency_type_id,link_type: 1})">
            <image  :src="dataPeizhi.icon1" mode="scaleToFill"  />
            <view class="btnName">收支明细</view>
          </view>
          <view class="rightBtn flex flex-align flex-center" @click="menuJump({is_tab: false,link: '/pages/orderList/orderList?type=0',link_type: 1})">
            <image  :src="dataPeizhi.icon2" mode="scaleToFill"  />
            <view class="btnName">查看订单</view>
          </view>
        </view>
      </view>
      <view class="leiji flex flex-align flex-bt">
        <view class="left">
          <view class="title">累计获得{{goodTypeData?.name}} <text>{{couponInfo.total}}</text> </view>
        </view>
        <view class="right flex flex-align " @click="openCoinMX">
          <view class="title">{{goodTypeData?.name}}说明</view>
          <image src="@/static/shop/shop11.png"  mode="scaleToFill" />
          
        </view>
      </view>
    </view>
    <view class="selectBtn flex flex-align">
      <view :class="tabInx==0?'flex-1 active':'flex-1'" @click="tabSelect(0)">全部商品</view>
      <view :class="tabInx==1?'flex-1 active':'flex-1'" @click="tabSelect(1)">兑换商品</view>
      <!-- <view :class="tabInx==2?'flex-1 active':'flex-1'" @click="tabSelect(2)">组合支付</view> -->
      <view :class="tabInx==3?'flex-1 active':'flex-1'" @click="tabSelect(3)">现金支付</view>
    </view>
    <view class="shopList">
      <view class="fenHeader flex flex-align">
        <image src="@/static/fenlei/fenlei01.png" mode="scaleToFill" />
        <input type="text" v-model="keyword" placeholder="输入关键词搜索">
        <button>搜索</button>
      </view>
      <view class="xuniItem" v-if="goods_info.length!=0">
        <scroll-view style="height:calc(100vh - 600rpx)" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
            :refresher-threshold="100" refresher-background="#fff" @scrolltolower="onBottom"
            @refresherrefresh="onRefresh">
            <xuniItem v-for="(item,index) in goods_info" :key="index" :dataInfo="item" :dataPeizhi="dataPeizhi" />
        </scroll-view>
      </view>
      <view class="xuniItem" v-if="goods_info.length==0" style="padding-top: 6vh;box-sizing: border-box;">
        <noData acImg="/static/nodata/noorder.png" content="暂无商品" width="400rpx" color="#969799"></noData>
      </view>
    </view>
    <CoinMx ref="CoinMxRef" :couponInfo="couponInfo" />
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, onMounted, reactive, computed, watch, unref } from 'vue'
import xuniItem from './components/xuniItem.vue';
import {integralGoods, userWallet } from '@/api/user';
import { useAuthStore } from '@/stores/counter'
import noData from '@/components/noData.vue';
import { menuJump } from '@/utils/tools';
import CoinMx from './components/coinMx.vue';
const type = ref(0)
const keyword = ref('')
const orderStore = useAuthStore();
const dataPeizhi = reactive({
  bgImg:'/static/shop/shop14.png',
  name:'礼品卡',
  icon1:'/static/shop/shop13.png',
  icon2:'/static/shop/shop12.png',
  btnBg:'#E86A5B',
  linearGradient:['#E86A5B','#FFAF98'],
  fontCllor:'#FE4927',
  bgColor:'#F1D7D0',
})
const bgStyle = `background:`+dataPeizhi.bgColor+`;`
const CoinMxRef = ref<InstanceType<typeof CoinMx>>();
const parme = ref({
  page:1,
  size:10,
  currency_type_id:'',
  category:0,
})
const goodTypeData = ref<
  | {
      id: number;
      name: string;
      kind: string;
    }
  | undefined
>(undefined);
const goods_info = ref<Recordable>([])
const goodTypeList = computed(() => orderStore.confige.currency); 
onLoad((e: any) => {
  type.value = e.type
  parme.value.currency_type_id = e.params_id
  goodTypeData.value = unref(goodTypeList).find((v: { id: any; }) => v.id ==parme.value.currency_type_id);
  dataPeizhi.name = goodTypeData.value?.name
  uni.setNavigationBarTitle({
    title: dataPeizhi.name
  })
  getList()
  getDetail()
})
const couponInfo = ref<Recordable>([])
const tabInx = ref(0)
const triggered = ref(false);
const total = ref(0);
function tabSelect(index: number) {
  tabInx.value = index
  parme.value.category = index
  parme.value.page = 1
  goods_info.value = []
  getList()
}
// 获取积分商品库
function getList() {
  integralGoods(parme.value).then((res: any) => {
    res.list.forEach((item:any) => {
      item.coinid = unref(goodTypeList).find((v: { id: any; }) => v.id === item.pay_currency_type_id)?.id
      item.coinname = unref(goodTypeList).find((v: { id: any; }) => v.id === item.pay_currency_type_id)?.name
    });
    if(parme.value.page == 1){
      goods_info.value =res.list
    }else{
      goods_info.value =goods_info.value.concat(res.list)
    }
    total.value = res.total
  })
}
function getDetail() {
  userWallet({current_type_id:parme.value.currency_type_id}).then((res: any) => {
    couponInfo.value = res
  })
}
function  onRefresh() {
    if (triggered.value) return;
    triggered.value = true;
    parme.value.page = 1
    getList()
    setTimeout(() => {
      triggered.value = false;
    }, 2000);
}
function onBottom() {
  if(goods_info.value.length == total.value){
    return
  }
  parme.value.page = parme.value.page + 1
  getList()
}
function openCoinMX(){
  CoinMxRef.value?.open()
}
</script>

<style scoped lang="scss">
.xuniList{width: 100vw;height: 100vh;box-sizing: border-box;padding: 26rpx;position: relative;
  .bgImg{position: absolute;top: 0;left: 0;width: 100%;z-index: 1;}
  .xuniHeader{padding-top: 60rpx;color: #fff;position: relative;z-index: 11;
    .header{width: 100%;height: 100%;padding: 0 0 0 10rpx;box-sizing: border-box;
      align-items: flex-end;
      .left{width: 60%;height: 100%;
        .name{font-size: 26rpx;margin-bottom: 10rpx;}
        .number{font-size: 48rpx;font-weight: bold;}
      }
      .right{
        .rightBtn{padding: 10rpx 0rpx;width: 200rpx;text-align: center;
          background: #fff;border-radius:60rpx;margin-left: 20rpx;
          image{width: 48rpx;height: 48rpx;}
          .btnName{font-size: 24rpx;color: #E86A5B;font-weight: bold;}
        }
      }
    }
   .leiji{margin-top:30rpx;position: relative;z-index: 11;
     .left{
       .title{font-size: 28rpx;
          text{font-weight: bold;}
        }
      }
     .right{
      .title{font-size: 24rpx;
      }
      image{width: 36rpx;height: 36rpx;margin-left: 10rpx;}
     }
    }
  }
  .selectBtn{margin-top:40rpx;position: relative;z-index: 11;
    .flex-1{font-size: 26rpx;text-align: center;line-height: 70rpx;background: #fff;border-radius: 50rpx;margin-right: 20rpx;font-weight: bold;color: #323233;}
    .active{color: #E86A5B;position: relative;}
    .active::after{position: absolute;bottom: -44rpx;left: 50%;content: '';width: 0;height: 0;border-style: solid;border-width: 0px 28rpx 25rpx 28rpx;
    border-color: transparent transparent #fff transparent;margin-left: -28rpx;}
    .flex-1:last-child{margin-right: 0;}
  }
  .shopList{position: relative;z-index: 11;
    background: #fff;border-radius: 20rpx;padding: 30rpx;margin-top: 40rpx;
    .fenHeader{background: #F5F6F7;border-radius: 80rpx;height: 80rpx;padding: 0 20rpx;
      margin: 0 0rpx 26rpx;
      image{width: 48rpx;height: 48rpx;}
      input{font-size: 26rpx;width: 440rpx;}
      button{padding: 0rpx 30rpx;background:#FE7431;color: #fff;border-radius: 60rpx;font-size: 24rpx;}
    }
    .xuniItem{height:calc(100vh - 600rpx);overflow-y: auto;}
  }
}
</style>